﻿<template>
  <!-- new cand -->
      <swiper :options="swiperOption" class="swiper_btn" style="display:flex;">
        <swiper-slide v-for="(slide,index) in wrap_list" style="display:flex;justify-content:space-around;" class="flex_d"> 
          <!-- sub_box s -->
          <!--v-for="slide in slide.list"-->
         
          <div class="sub_candidates_box" v-for="(slide,index_in) in slide" >
            <img v-bind:src="slide.image|img_show_base" class="sub_candidates_box_header_img" v-on:click.self="sub_candidates_box_click(slide.enrollactiveId)"/>
            <div class="candidates_box_poll">
              <div class="poll">票数:</div>
              <div>{{slide.poll}}</div>
            </div>
            <div class="toupiao" v-on:click.self="toup(index,index_in,slide.id)">
              投票
            </div>
          </div>
          <!-- sub box e -->

        </swiper-slide>

        <!--<div class="swiper-pagination" slot="pagination"></div>-->
        <div class="swiper-button-prev candidates_box_left" slot="button-prev">
          <img src="../../static/img/nav_left.png" class="" style="width:3.6vw">
        </div>

        <div class="swiper-button-next candidates_box_right" slot="button-next">
          <img src="../../static/img/nav_left.png" class="" style="width:3.6vw">
        </div>

      </swiper>
  <!-- new cad -->

</template>

<script>
  import { mapState, mapMutations, mapActions, mapGetters } from 'vuex';
  import { Toast, Indicator } from 'mint-ui';
  import "../filter/filter.js"
  import Vue from 'vue'
  import VueAwesomeSwiper from 'vue-awesome-swiper'

  import { swiper, swiperSlide } from 'vue-awesome-swiper'
  var qs = require('qs');
  export default {
    name: 'carrousel',
    data() {
      return {
        swiperOption: {
          setWrapperSize :true,
          //pagination : '.swiper-pagination',
          paginationClickable :true,
          mousewheelControl : true,
          observeParents: true,
          nextButton: '.swiper-button-next',
          prevButton: '.swiper-button-prev',
          
        },
        swiperSlides:[],
        img_base: "",
        wrap_list: [{}, {}, {}]
      }
    },
    props: ['card_mess'],
    ...mapActions([
      "thom_redirect",
    ]),
    ...mapMutations([
      "header_scroll_nav"
    ]),
    mounted() {
      let wrap_list = []
      let min_list = []
      let len = this.card_mess.length;

      let card_mess = this.card_mess
      for (let x = 1; x <= len ; x++) {

        min_list.push(card_mess[x - 1]);

        if (len < 4 && x == len) {
          wrap_list.push({list:min_list });
          min_list = [];
        }
        if (x % 4 == 0) {
          wrap_list.push({ list:min_list });
            min_list = [];
        } 
      }

      console.log("wrap_list______________")
      console.log(wrap_list)
      this.wrap_list = wrap_list[0].list;
      this.nextTick(function (){
        document.getElementsByClassName("swiper-wrapper")[0].style.display = "flex";       
      })
     
    },
    methods: {
      //显示cadnd
      sub_candidates_box_click: function (id) {
        console.log("id______________________")
        console.log("222222222");
        console.log("emit)))")
        console.log(id)
        this.$emit('scroll_a',id);
      },
      //投票
      toup: function (index,slide_index,id) {
     
        console.log("index")
        console.log(index)
        console.log("slide_index")
        console.log(slide_index)
        ///api/user / activity / Vote
        let user_id = sessionStorage.getItem("user_id");
        Indicator.open();
        this.$http.post('/yizhiweimen/api/user/activity/Vote',
          qs.stringify(
            {
              'voteId': id,
              "uid": user_id,
            })
        )
          .catch((thrown) => {
            Indicator.close();
            console.log(thrown);
          }).then((e) => {
            Indicator.close();
            if (e.data == "感谢您的投票！" ){
              this.wrap_list[index].list[0][slide_index].integral += 1;
            }
            Toast({
              message: e.data,
              position: 'bottom',
              duration: 2000
            });
          })
      },
      wrap_click_img: function (id) {
       // alert(id)
        sessionStorage.setItem("off_post_id",id)
        this.$store.dispatch("thom_redirect",
        {
           name: "/Off_Gift", router: this.$router
        });
      }
    }
  }
</script>
<style>
  .swiper-wrapper{
    display:flex;
  }
</style>
<style scoped>

  .flex_d{
    display:flex;
  } .swiper-wrapper {
    display: flex;
    background-color:#000;
  } 
  .swiper_btn {
    width: 100%;
    overflow: hidden;
  } 
  .candidates {
    border-radius: 2vw;
    width: 77vw;
    height: 6.25rem;
    border: 1px solid #9f5c2f;
    margin: 0.9rem auto 0;
    background-color: #fff;
    position: relative;
    padding-left: 5vw;
    padding-right: 5vw;
  }

  .candidates_title {
    width: 13vw;
    position: absolute;
    top: -0.5rem;
    left: 2vw;
    height: 0.87rem;
    line-height: 0.87rem;
    text-align: center;
    background-color: #fff;
    color: #9f5c2f;
    border-radius: 1vw;
    font-size: 0.6rem;
    border: 1px solid #9f5c2f;
  }

  .candidates_box {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    position: relative;
  }

  .sub_candidates_box_header_img {
    height: 3rem;
    width: 3rem;
    border: 1px solid #9f5c2f;
    border-radius: 2vw;
    display: block;
    margin-top: 0.6rem;
  }

  .candidates_box_poll {
    width: 100%;
    display: flex;
    justify-content: space-around;
    font-size: 0.5rem;
    line-height: 1.5;
    color: #9f5c2f;
  }

  .toupiao {
    font-size: 0.675rem;
    height: 1.15rem;
    border-radius: 1vw;
    line-height: 1.15rem;
    border: 1px solid #9f5c2f;
    color: #9f5c2f;
    width: 100%;
  }

  .candidates_box_right {
    position: absolute;
    top: 50%;
    right: -4vw;
    margin-top: -1rem;
    transform: rotate(180deg);
    width: 3.6vw;
  }

  .candidates_box_left {
    position: absolute;
    top: 50%;
    left: -4vw;
    margin-top: -1rem;
    width: 3.6vw;
  }
</style>